<template>
  <div class="wrapper">
    <a @click="click">点击</a>
    <transition name="opacity">
      <div class="box" v-show="status">
        111111
      </div>
    </transition>
    <br>
    <br>
    <br>
    <a @click="move">移动</a>
    <div class="container" v-show="moveStatus">
      <transition name="move">
        <div class="entity" v-show="moveStatus"></div>
      </transition>
    </div>
  </div>
</template>
<script>
import tasks from '@/assets/script/tasks'
export default {
  name: "",
  data: () => ({
    status: true,
    moveStatus: false,
  }),
  methods: {
    click() {
      this.status = !this.status
    },
    move() {
      this.moveStatus = !this.moveStatus
    }
  },
  created () {
    tasks.actions.push(
      function step1(x) {
        console.log('step1', x)
        return x * 2
      },
      function step2(x, y) {
        console.log('step2', x, y)
        return x + (y * 2)
      },
      function step3(x, y, z) {
        console.log('step3', x, y, z)
        return (x * y) + z
      }
    )

    let it = tasks[Symbol.iterator]()
    it.next(10)
    it.next(20, 50)
    it.next(20, 50, 120)
    it.next(11)
  }
}
</script>
<style lang="scss" scoped>
.wrapper {
  width: 1200px;
  margin: 0 auto;
}
.box {
  $height: 100px;
  width: $height;
  height: $height;
  line-height: $height;
  font-size: 20px;
  text-align: center;
  background-color: #2f89fc;
  color: #ffffff;
  opacity: .3;
}
.opacity-enter-active,
.opacity-leave-active {
  transition: opacity .5s ease-in;
}
.opacity-enter,
.opacity-leave-to {
  opacity: 0;
}

.container {
  width: 800px;
  height: 600px;
  background: #ffeaa5;
  position: relative;
  .entity {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: #fe5f55;
    left: 20%;
  }
}
.move-enter-active,
.move-leave-active {
  transition: transform .5s ease-in;
}
.move-enter,
.move-leave-to {
  transform: translateX(100%);
}
</style>
